<script setup lang="ts">
/**
 * @desc ClearableRadioGroup
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/8/12 下午1:14
 */

import type { PropType } from 'vue'
import type { EnumsOptions } from '@/configuration/enums'

defineOptions({ name: 'ClearableRadioGroup' })

const $props = defineProps({
  modelValue: {
    type: [String, Number, Boolean] as PropType<string | number | boolean>,
    default: undefined,
  },
  validator: {
    type: Function as PropType<() => boolean>,
    default: undefined,
  },
  options: {
    type: Array as PropType<EnumsOptions<any>>,
    default: () => [],
  },
})
const $emits = defineEmits(['update:modelValue', 'input', 'change'])

function changeValue(newValue) {
  if (newValue === $props.modelValue) {
    $emits('update:modelValue', '')
    $emits('input', '')
    $emits('change', '')
    return
  }
  $emits('update:modelValue', newValue)
  $emits('input', newValue)
  $emits('change', newValue)
}
</script>

<template>
  <a-radio-group :model-value="$props.modelValue" type="button" size="mini">
    <a-radio v-for="i in options" :key="i.value" :value="i.value" @click="changeValue(i.value)">
      {{
        i.label
      }}
    </a-radio>
  </a-radio-group>
</template>
